<template>
    <view class="xilu flex-box flex-col flex-align-start">
        <u-navbar :safeAreaInsetTop="true" :fixed="false" :leftIconSize="0" bgColor="#fff">
            <view class="xilu_classic_list fs32 col89" slot="center">
                <view :class="classicIndex == index?'active':''" v-for="(item,index) in classList" @click="changeList(index)">{{item.name}}</view>
            </view>
        </u-navbar>
        <Footer :footState="1" :num="messageCount"></Footer>
        <view class="flex-grow-1 w100">
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :fixed="false" bottom="100rpx" :safearea="true">
                <!--  -->
                <view class="xilu_hot" v-if="classList[classicIndex].id==2">
                    <view class="flex-box flex-between">
                        <view class="fs34 col3">热门话题</view>
                        <view class="fs26 col89" @click="bindMore()">查看更多+</view>
                    </view>
                    <view class="flex-box flex-wrap">
                        <view class="xilu_topic flex-box" v-for="(item,index) in hotTopicList" @click="bindTopicDetail(item.id)">
                            <image :src="item.image_text" mode="aspectFill"></image>
                            <view class="flex-grow-1 pl20">
                                <view class="fs30 col3">{{item.name}}</view>
                                <view class="fs24 cola">{{item.join_users}}人讨论</view>
                            </view>
                        </view>
                    </view>
                </view>
                <!--  -->
                <!-- <view class="fs36 col10 plr30 pt40">动态</view> -->
                <Trends :trends="trends" @togglesRec="togglesRec" @togglesCollect="togglesCollect" @comment="comment" @previewImg="previewImg" @toggleFocus="toggleFocus" @bindDetail="bindDetail">
                </Trends>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Footer from "@/components/footer/footer.vue";
    import Trends from "@/components/trends/trends.vue";
    const chatIM = require('../../xilu/chat.js');
    export default {
        components: {
            Footer,
            Trends
        },
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                classList: [{
                    id: 0,
                    name: "推荐"
                }, {
                    id: 1,
                    name: "关注"
                }, {
                    id: 2,
                    name: "广场"
                }],
                classicIndex: 0,
                hotTopicList: [],
                downOption: {
                    autoShowLoading: true, // 显示下拉刷新的进度条
                    textColor: "#aaa" // 下拉刷新的文本颜色
                },
                messageCount: 0,
                pageNum: 1, // 页码
                pageSize: 10, // 页长
                trends: [

                ]
            };
        },
        onLoad() {
            this.hotTopic();
            let page = this;
            uni.$on("unread_count", function(data) {
                page.messageCount = getApp().globalData.chat_config.messageCount
            });
            if (getApp().globalData.chat_config.SocketTask) {
                chatIM.setMessageBadge(false)
            }
        },
        onUnload() {
            uni.$off("unread_count");
        },
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
        methods: {
            hotTopic() {
                this.$core.get({
                    url: 'xilumarket.topic/top_lists',
                    loading: false,
                    data: {},
                    success: (ret) => {
                        this.hotTopicList = ret.data;
                    }
                })
            },
            //切换Tab
            changeList(index) {
                this.classicIndex = index;
                this.mescroll.resetUpScroll();
            },
            // 点击收藏
            togglesCollect(e) {
                if (!this.$core.getUserinfo(true)) {
                    return true;
                }
                this.$core.post({
                    url: 'xilumarket.forum/toggle_collection',
                    data: {
                        forum_id: e.id
                    },
                    success: ret => {
                        this.trends[e.index] = ret.data;
                        this.$forceUpdate();
                    },
                    fail: err => {}
                });
            },
            // 点击点赞
            togglesRec(e) {
                if (!this.$core.getUserinfo(true)) {
                    return true;
                }
                this.$core.post({
                    url: 'xilumarket.forum/toggle_fav',
                    data: {
                        forum_id: e.id
                    },
                    success: ret => {
                        this.trends[e.index] = ret.data;
                        this.$forceUpdate();
                    },
                    fail: err => {

                    }
                });

            },
            // 点击评论
            comment(e) {
                this.bindDetail(e);
            },
            // 关注取关
            toggleFocus(e) {
                if (!this.$core.getUserinfo(true)) {
                    return true;
                }
                this.$core.post({
                    url: 'xilumarket.forum/toggle_focus',
                    data: {
                        user_id: e.user_id
                    },
                    success: ret => {
                        this.trends[e.index].is_focus_count = ret.data.is_focus_count;
                        this.$forceUpdate();
                    },
                    fail: err => {
                        console.log(err);
                    }
                });
            },
            //详情
            bindDetail(e) {
                uni.navigateTo({
                    url: '/discovery/trends_detail/trends_detail?id=' + e.id
                })
            },
            //进入话题
            bindTopicDetail(id) {
                uni.navigateTo({
                    url: '/discovery/trends_circle/trends_circle?id=' + id
                })
            },
            //更多话题
            bindMore() {
                uni.navigateTo({
                    url: '/discovery/more_topic/more_topic'
                })
            },
            // 点击预览
            previewImg(e) {
                let that = this;
                uni.previewImage({
                    current: e.picIndex,
                    urls: that.trends[e.arrIndex].images_text,
                    fail() {
                        uni.showToast({
                            title: "网络错误，请重试"
                        })
                    }
                })
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let url = 'xilumarket.forum/hot_lists';
                if (this.classicIndex == 1) {
                    //关注
                    url = "xilumarket.forum/focus_lists";
                } else if (this.classicIndex == 2) {
                    //广场
                    url = "xilumarket.forum/lists";
                }
                this.$core.get({
                    url: url,
                    loading: false,
                    data: {
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.trends = []; //如果是第一页需手动置空列表
                        this.trends = this.trends.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        height: 100vh;

        &_classic_list {
            width: 100vw;
            height: 88rpx;
            padding-top: 20rpx;
            overflow-x: scroll;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }

            view {
                display: inline-block;
                margin-left: 55rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
            }
        }

        &_hot {
            width: 690rpx;
            background: #F7F9FC;
            border-radius: 20rpx;
            padding: 35rpx 30rpx;
            margin: 30rpx auto 0;
        }

        &_topic {
            width: 50%;
            padding-top: 35rpx;

            image {
                width: 65rpx;
                height: 65rpx;
                border-radius: 15rpx;
            }
        }
    }
</style>